<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 创建自定义属性,用于获取添加到搜索栏上的值 -->
    <button data-href="/eat">吃饭</button>
    <button data-href="/sleep">睡觉</button>
    <button data-href="/play">打豆豆</button>
    <div class="content"></div>
    <script>
      let content = document.querySelector('.content')
      let btn = document.querySelectorAll('button')
      const routes = [
        { path: '/eat', content: '我是新闻组件' },
        { path: '/sleep', content: '我是娱乐组件' },
        { path: '/play', content: '我是音乐组件' },
      ]
      btn.forEach((item) => {
        item.addEventListener('click', function () {
          // 自定义属性的获取和使用
          // history路由跳转主要使用history中的pushState向历史队列中添加历史,然后根据修改后的路由修改组件
          history.pushState(null, null, this.dataset.href)
          //   弊端是无法进行刷新操作,因为一刷新就会将"/路由"当作请求发往后端,后端没有接口修正的话就会报错
          //   所以history必须使用后端配合
          routes.forEach((item) => {
            if (item.path === this.dataset.href) {
              content.textContent = item.content
            }
          })
        })
      })
      // 但是上述的修改,只能由点击按钮触发,所以使用window上的事件onpopstate,监视监听路由回退或前进
      window.onpopstate = function () {
        // 当页面历史记录发生改变时,触发当前事件
        // 然后根据当前路由修改内容
        routes.forEach((item) => {
          if (location.pathname === item.path) {
            content.textContent = item.content
          }
        })
      }
    </script>
  </body>
</html>
